import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'


//自动导入组件
import Components from 'unplugin-vue-components/vite';
import AutoImport from 'unplugin-auto-import/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

//打包体积分析工具
import { visualizer } from 'rollup-plugin-visualizer'

//适配插件
import postcsspxtoviewport from 'postcss-px-to-viewport'

// import mkcert from "vite-plugin-mkcert";

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  console.log("=====", mode);
  let outDir = "dist/" + mode.toUpperCase();
  let droplist = ['console', 'debugger'];
  // if (mode == 'dev') {
  //   droplist = [];
  // }
  return {
    base: "./",
    assetsDir: "assets",
    publicPath: "./",
    plugins: [
      vue(),
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        //指定自动导入组件所在位置
        dirs: ['src/components/'],
        //.vue类型的文件进行自动按需引入
        extensions: ['vue'],
        resolvers: [ElementPlusResolver()],
      }),
      visualizer({ open: false }),//打包体积分析工具
      // mkcert(),//https插件
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    esbuild: {
      drop: droplist,//打包后去除console和debugger日志信息
    },
    build: {
      outDir: outDir,
      rollupOptions: {
        output: {
          experimentalMinChunkSize: 10 * 1024,//小于10kb的chunk文件将会合并到其他文件中
          entryFileNames: 'js/[name]-[hash].js', // 指定 JS 文件的输出路径及命名规则
          chunkFileNames: 'js/[name]-[hash].js', // 指定分片文件的输出路径及命名规则
          assetFileNames: (assetInfo) => {
            // 设置不同类型文件的输出路径及命名规则
            if (assetInfo.type === 'asset') {
              if (/\.(jpe?g|png|gif|svg)$/i.test(assetInfo.name)) {
                return 'img/[name].[hash].[ext]' // 图像文件输出路径及命名规则
              } else if (/\.(ttf|woff|woff2|eot)$/i.test(assetInfo.name)) {
                return 'fonts/[name].[hash].[ext]' // 字体文件输出路径及命名规则
              }
            }
            return '[ext]/[name]-[hash].[ext]' // 其他资源文件输出路径及命名规则
          }
        }
      }
    },
    css: {
      postcss: {
        plugins: [
          postcsspxtoviewport({
            // 要转化的单位
            unitToConvert: 'px',
            // UI设计稿的大小
            viewportWidth: 3840,
            // 转换后的精度
            unitPrecision: 6,
            // 转换后的单位
            viewportUnit: 'vw',
            // 字体转换后的单位
            fontViewportUnit: 'vw',
            // 能转换的属性，*表示所有属性，!border表示border不转
            propList: ['*'],
            // 指定不转换为视窗单位的类名，
            selectorBlackList: ['ignore-', '.el-'],
            // 最小转换的值，小于等于1不转
            minPixelValue: 1,
            // 是否在媒体查询的css代码中也进行转换，默认false
            mediaQuery: false,
            // 是否转换后直接更换属性值
            replace: true,
            // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
            exclude: [/node_modules/],
            // 包含那些文件或者特定文件
            include: [],
            // 是否处理横屏情况
            landscape: false
          }),
        ]
      }
    },
    server: {
      // hmr: false,//取消热更新
      host: '0.0.0.0',
      port: 4000,    //设置服务启动端口
      proxy: {
        '/devProxy': {
          target: 'http://101.6.64.208:50082',	//实际请求地址
          // target: 'http://221.218.208.24:9005',	//实际请求地址
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/devProxy/, '')
        },
        '/prodProxy': {
          target: 'http://221.218.210.105:4000/cracking',	//实际请求地址
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/prodProxy/, '')
        },
      }
    },
  }
})
